import QtQuick
import QtQuick.Controls
import QtQuick.Window

Window {
    signal sig_capture()
    signal sig_done(int x, int y)

    signal sig_image_update()
    signal sig_color_update(color mcolor)

    signal sig_copy_hex(string val)
    signal sig_copy_rgb(int r,int g,int b)

    property int lastWidth : 0
    property int lastHeight: 0
    property int lastX: 0
    property int lastY: 0
    property int lastFlags: 0
    property int lastVisibility: 0

    onSig_image_update: {
        //root.hide()
        root.visible = false
        root.storeWindow()

        root.visibility = Qt.WindowFullScreen
        root.flags = Qt.Window & Qt.WindowStaysOnTopHint & Qt.WindowFullScreen
        root.x = 0
        root.y = 0
        root.width = Screen.width
        root.height = Screen.height

//        img.source = ""
        img.source = "image://ScreenImage/0"
        img.visible = true

        colorPicker.enabled = true;
        //root.show()
        root.visible = true
    }
    onSig_color_update: function(mcolor){
        colorPreview.color = mcolor
        colorPreviewAlpha.text = Math.floor(mcolor.a * 255)
        colorPreviewRed.text = Math.floor(mcolor.r * 255)
        colorPreviewGreen.text = Math.floor(mcolor.g * 255)
        colorPreviewBlue.text = Math.floor(mcolor.b * 255)
        colorIndicator.color = mcolor
        val_r.value = mcolor.r * 255
        val_g.value = mcolor.g * 255
        val_b.value = mcolor.b * 255
        //temp = mcolor
        color_hex.text = mcolor
    }

    function restoreWindow() {
        root.flags = lastFlags
        root.visibility = lastVisibility
        root.x = lastX
        root.y = lastY
        root.width = lastWidth
        root.height = lastHeight
    }

    function storeWindow() {
        lastX = root.x
        lastY = root.y
        lastWidth = root.width
        lastHeight = root.height
        lastFlags = root.flags
        lastVisibility = root.visibility
    }

    id: root
    width: 296
    height: 100

    visible: true
    color: "#F0F0F0"
    title: qsTr("take color")
    //anchors.margins: 10
    Rectangle {
        id: colorIndicator
        x:8
        y:8
        width: 60//captureBtn.width
        height: 60
        color: "#DCDCDC"
        border.color: "black"
        border.width: 1
    }

    Button {
        id: captureBtn
        text: "Capture"
        x:8
        y:72
        width: 60
        height: 20

        onClicked: {
            sig_capture();
        }
    }

    Rectangle{
        x:72
        y:8
        width:216
        height:84
        color:"#F0F0F0"
        border.width: 1
        border.color:"#797979"

        Text {
            x:4
            y:4
            width: 25
            height: 24
            text: "HEX"
            horizontalAlignment:Text.AlignLeft
            verticalAlignment: Text.AlignVCenter
        }
        Rectangle{
            x:32
            y:4
            width: 152
            height: 24
            border.width: 1
            border.color: "#797979"
            Text {
                id: color_hex
                anchors.fill: parent
                horizontalAlignment:Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
            }
        }

        Button {
            id: btn_hex
            x:188
            y:4
            width: 24
            height: 24
            //text: "复制"
            icon.source: "qrc:/CaptionCover/copy.png"
            icon.width: 16
            icon.height: 16
            onClicked: sig_copy_hex(color_hex.text)
        }

        Text {
            x:4
            y:32
            width: 25
            height: 24
            text: "RGB"
            horizontalAlignment:Text.AlignLeft
            verticalAlignment: Text.AlignVCenter
        }

        SpinBox
        {
            id:val_r
            x:32
            y:32
            width: 50
            height: 24
            from: 0
            to:255
            font.pixelSize: 9
        }
        SpinBox
        {
            id:val_g
            x:83
            y:32
            width: 50
            height: 24
            from: 0
            to:255
            font.pixelSize: 9
        }
        SpinBox
        {
            id:val_b
            x:134
            y:32
            width: 50
            height: 24
            from: 0
            to:255
            font.pixelSize: 9
        }

        Button {
            x:188
            y:32
            width: 24
            height: 24
            icon.source: "qrc:/CaptionCover/copy.png"
            icon.width: 16
            icon.height: 16
            onClicked:sig_copy_rgb(val_r.value,val_g.value,val_b.value)
        }
    }

    MouseArea {
        id: colorPicker
        anchors.fill: parent
        enabled: false
        hoverEnabled: true

        property int previewerOfst : 30
        property int previewerSize : 60
        property int halfScreenWidth: Screen.width/2
        property int halfScreenHeight: Screen.height/2

        function updateColorPicker(x, y) {
            var left = x < halfScreenWidth
            var top = y < halfScreenHeight
            colorPreviewGrid.x = left ? x + previewerOfst : x - previewerOfst - colorPreview.width
            colorPreviewGrid.y = top ? y + previewerOfst : y - previewerOfst - colorPreview.height

            sig_done(x, y)
        }

        onClicked: (mouse)=>{
            sig_done(mouse.x, mouse.y)
            root.visible = false
            img.visible = false
            img.source = ""
            enabled = false

            root.restoreWindow()
            root.visible = true
        }

        onEntered: {
            updateColorPicker(mouseX, mouseY)
        }

        onPositionChanged: (mouse)=>{
            updateColorPicker(mouse.x, mouse.y)
        }

        Image {
            id: img
            anchors.fill: parent
            smooth: false

        }

        Rectangle {
            id:colorPreviewGrid
//            x:colorPreviewGrid.x-3
//            y:colorPreviewGrid.y-3
            width: maingrid.width+6
            height: maingrid.height+3
            color: "white"
            border.width: 1
            border.color: "black"
            visible: colorPicker.enabled
            Grid {
                id: maingrid
                columns: 2
                spacing: 3

                x:3
                y:3
                //visible: colorPicker.enabled

                Rectangle {
                    id: colorPreview
                    width: colorPicker.previewerSize
                    height: colorPicker.previewerSize
                    border.width: 1
                    border.color: "red"
                }
                Grid {
                    columns: 2
                    spacing: 1
                    Text {
                        text: "A: "
                    }
                    Text {
                        id: colorPreviewAlpha
                    }
                    Text {
                        text: "R: "
                    }
                    Text {
                        id: colorPreviewRed
                    }
                    Text {
                        text: "G: "
                    }
                    Text {
                        id: colorPreviewGreen
                    }
                    Text {
                        text: "B: "
                    }
                    Text {
                        id: colorPreviewBlue
                    }
                }
            }
        }
    }
}
